<template>
	<view class="singer-detail-page">
		<!-- 歌手信息头部 -->
		<view class="singer-header">
			<image :src="currentSinger.avatar" class="singer-avatar"></image>
			<view class="singer-info">
				<text class="singer-name">{{ currentSinger.name }}</text>
				<text class="singer-desc">{{ currentSinger.desc }}</text>
				<text class="singer-brief">{{ currentSinger.brief }}</text>
			</view>
		</view>
		
		<!-- 歌手歌曲列表 -->
		<view class="songs-section">
			<view class="section-title">
				<text>发表的歌曲</text>
			</view>
			<uni-list>
				<uni-list-item v-for="(song, index) in singerSongs" :key="index" :title="song.name" :note="song.album" showArrow>
					<template v-slot:footer>
						<text class="song-duration">{{ song.duration }}</text>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
import { singerDetailList } from '../../commons/mock.js';
	export default {
		name: 'SingerDetailPage',
		data() {
			return {
				singerId: '',
				currentSinger: {
					id: 0,
					name: '',
					desc: '',
					avatar: '',
					brief: '',
					songs: []
				},
				singerSongs: []
			};
		},
		onLoad(options) {
			// 获取传递过来的歌手ID
			this.singerId = options.id;
			// 获取歌手详情数据
			this.getSingerDetail();
		},
		methods: {
			// 获取歌手详情数据
			getSingerDetail() {
				// 在实际应用中，这里应该通过API请求获取数据
				// 现在使用模拟数据
				const singerDetail = singerDetailList.find(item => item.id === parseInt(this.singerId));
				if (singerDetail) {
					this.currentSinger = singerDetail;
					this.singerSongs = singerDetail.songs;
					// 设置页面标题为歌手名称
					uni.setNavigationBarTitle({
						title: singerDetail.name
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.singer-detail-page {
		background-color: #f5f5f5;
		padding-bottom: 20rpx;
		
		// 歌手头部信息
		.singer-header {
			display: flex;
			padding: 30rpx;
			background-color: #00c273;
			color: white;
			
			.singer-avatar {
				width: 200rpx;
				height: 200rpx;
				border-radius: 100rpx;
				margin-right: 30rpx;
			}
			
			.singer-info {
				display: flex;
				flex-direction: column;
				justify-content: center;
				
				.singer-name {
					font-size: 48rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				
				.singer-desc {
					font-size: 28rpx;
					margin-bottom: 15rpx;
				}
				
				.singer-brief {
					font-size: 26rpx;
					line-height: 1.5;
				}
			}
		}
		
		// 歌曲列表区域
		.songs-section {
			margin-top: 20rpx;
			background-color: white;
			
			.section-title {
				padding: 20rpx 30rpx;
				font-size: 32rpx;
				font-weight: bold;
				border-bottom: 1rpx solid #eee;
			}
			
			.song-duration {
				font-size: 26rpx;
				color: #999;
			}
		}
	}
</style>